<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../HTMLTurbo.css">
<link rel="stylesheet" type="text/css" href="../style/demo.css">

<script charset="utf-8" src="../../jquery/1.12.4/jquery.min.js"></script>
<script charset="utf-8" src="../../HTMLTurbo.php"></script>
<style>
*{
	padding:0;
	margin:0;
}

.table{
	background-color:#DDD;
}
.table th{
	background-color:#EEE;
}
.table td{
	background-color:#FFF;
}


.table{}
.table .text{}
.table .centerText{ text-align:center;}
.table .leftText{ text-align:left;}
.table .number{ text-align:right;}

.table .nameId{ display:none;}
</style>
</head>

<body>
<div class="ht">
    <table border="0" cellpadding="0" cellspacing="1" class="table" id="table">
        <thead>
            <tr>
                <th width="200">No</th>
                <th width="200" class="nameId">字段二</th>
                <th width="200">字段二</th>
                <th width="200">字段三</th>
                <th width="200" class="number">数量</th>
                <th width="200" class="price number">单价</th>
                <th width="200" class="amount number">金额</th>
            </tr>
        </thead>
        <tbody>
        	<tr class="template">
                <td contenteditable="true" name="no" class="no">0</td>
                <td contenteditable="true" name="nameId" class="nameId">1</td>
                <td contenteditable="true" name="name" class="name">值二</td>
                <td contenteditable="true" name="code" class="code">值三</td>
                <td contenteditable="true" name="number" class="number">0</td>
                <td contenteditable="true" name="price" class="price number">0.00</td>
                <td contenteditable="true" name="amount" class="amount number">0.00</td>
            </tr>
            <tr>
                <td contenteditable="true" name="no" class="no">0</td>
                <td contenteditable="true" name="nameId" class="nameId">1</td>
                <td contenteditable="true" name="name" class="name">值二</td>
                <td contenteditable="true" name="code" class="code">值三</td>
                <td contenteditable="true" name="number" class="number">0</td>
                <td contenteditable="true" name="price" class="price number">0.00</td>
                <td contenteditable="true" name="amount" class="amount number">0.00</td>
            </tr>
            <tr>
                <td contenteditable="true" name="no" class="no">0</td>
                <td contenteditable="true" name="nameId" class="nameId">1</td>
                <td contenteditable="true" name="name" class="name">值二</td>
                <td contenteditable="true" name="code" class="code">值三</td>
                <td contenteditable="true" name="number" class="number">0</td>
                <td contenteditable="true" name="price" class="price number">0.00</td>
                <td contenteditable="true" name="amount" class="amount number">0.00</td>
            </tr>
        </tbody>
        <tfoot>
        	<tr>
                <td contenteditable="true" name="no" class="no">总计</td>
                <td contenteditable="true" name="nameId" class="nameId"></td>
                <td contenteditable="true" name="name" class="name"></td>
                <td contenteditable="true" name="code" class="code"></td>
                <td contenteditable="true" name="number" class="number"></td>
                <td contenteditable="true" name="price" class="price number"></td>
                <td contenteditable="true" name="amount" class="amount number">0.00</td>
            </tr>
        </tfoot>
    </table>
    <input type="button" value="添加" id="addButton" />
    <textarea name="value" id="value" cols="70" rows="10"></textarea>
    <input type="button" value="提交" id="submitButton" />
</div>
<script>
var dataTable=new HTMLTurbo.control.EditableTable("#table");
dataTable.init();
dataTable.keydownHandler=function(event){
	var target=event.target;
	var name=$(target).attr("name");
	if(name=="number"){
		if(!this.validateInteger(event)){
			return false;
		}
	}
	if(name=="price"){
		if(!this.validateFloat(event)){
			return false;
		}
	}
}

dataTable.calculation=function(){
	var i=1;
	$("#table tbody tr").each(function(){
		$(".no",this).html(i);
		i++
	});
	
	//计算金额
	$("#table tbody tr").each(function(){
		var number=$(".number",this).html();
		var price=$(".price",this).html();
		var amount=number*price;
		$(".amount",this).html(amount)
	})
	
	//计算总数
	var totalAmount=0
	$("#table tbody .amount").each(function(){
		var amount=$(this).html();
		totalAmount+=parseFloat(amount);
	})
	
	$("#table tfoot .amount").html(totalAmount);
}

dataTable.cellClickHandler=function(event){
	var target=event.currentTarget;
	var index=this.getRowIndexByCell(target);
	
	var name=$(target).attr("name");
	console.log(name)
	
	//选择联系人
	if(name=="name" || name=="code"){
		selectContact(index);
	}
}

$("#submitButton").bind("click",function(event){
	var value=dataTable.getDataList()
	$("#value").val(JSON.stringify(value))
	console.log(value);
})
$("#addButton").bind("click",function(event){
	dataTable.addRow();
})

function selectContact(index){
	console.log(index);
}
function setContactBy(index,contact){
	dataTable.setValue(index,".nameId",contact.id);
	dataTable.setValue(index,".name",contact.name);
	dataTable.setValue(index,".code",contact.code);
	dataTable.setValue(index,".number",contact.number);
	dataTable.setValue(index,".price",contact.price);
	dataTable.calculation()
}

var contact={}
contact.id=111;
contact.name="222"
contact.code="abcde"
contact.price=1.5
contact.number=1
setContactBy(1,contact);
</script>
</body>
</html>